<style>
</style>
<template>
    <span>
    <Button @click="showStudentDrawer" type="warning" size="small">企业员工</Button>
    <Drawer title="企业员工" :closable="false" placement="right" v-model="studentDrawer" width="50%">
         <Row class="operation" slot="header">
            <Button @click="addUser" type="primary" icon="md-add">添加员工</Button>
        </Row>
        <Row @keydown.enter.native="handleSearch">
           <Form ref="searchUserForm" :model="searchUserForm" inline :label-width="55" class="search-form">
                <Form-item label="用户名" prop="username">
                    <Input type="text" v-model="searchUserForm.username" clearable placeholder="请输入用户名" style="width: 200px"/>
                </Form-item>
                <Form-item style="margin-left:-35px;" class="br">
                    <Button @click="handleSearchUser" type="primary" icon="ios-search">查询</Button>
                    <Button @click="handleResetUser">重置</Button>
                </Form-item>
            </Form>
        </Row>
        <Row style="padding-top: 5px">
            <Table :loading="userLoading" border :columns="userColumns" :data="userData" ref="userTable"></Table>
        </Row>
        <Row type="flex" justify="end" class="code-row-bg page" style="margin: 10px 0;">
            <Page :current="searchUserForm.pageNumber" :total="totalUser" :page-size="searchUserForm.pageSize" @on-change="changeUserPage" @on-page-size-change="changeUserPageSize" :page-size-opts="[9,18,36]" size="small" show-total show-elevator show-sizer></Page>
        </Row>
    </Drawer>
        <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
            <Form ref="addUserForm" :model="addUserForm" :label-width="80" :rules="formValidate">
                <FormItem label="用户名" prop="userName">
                  <Input v-model="addUserForm.userName"/>
                </FormItem>
            </Form>
             <div slot="footer">
            <Button type="text" @click="cancelSubmit">取消</Button>
            <Button type="primary" :loading="submitLoading" @click="handleSubmit">确认添加</Button>
          </div>
        </Modal>
    </span>
</template>
<script>
    import {getUserListData,addCompanyUser,delCompUserByUserIds} from "@/api/index";

    export default {
        name: "studentDrawer",
        props: {
            company: Object
        },
        data() {
            return {
                treeLoading: true,
                showcheckbox: true,
                modalVisible: false,
                submitLoading:false,
                studentDrawer: false,
                modalTitle: '添加员工',
                submitPermLoading: false,
                selectAllFlag: false,
                userLoading: true,
                searchUserForm: {
                    companyId:this.company.id,
                    pageNumber: 1, // 当前页数
                    pageSize: 10, // 页面大小
                    sort: "u.createTime", // 默认排序字段
                    order: "desc" // 默认排序方式
                },
                formValidate: {
                    userName: [
                        {required: true, message: "账号不能为空", trigger: "blur"}
                    ]
                },
                addUserForm: {
                    companyId:this.company.id,
                    userName: ""
                },
                permData: [],
                userColumns: [
                    {
                        type: "index",
                        width: 60,
                        align: "center"
                    },
                    {
                        title: "用户名",
                        key: "userName",
                        width: 145,
                        sortable: true
                    },
                    {
                        title: "头像",
                        key: "avatar",
                        width: 80,
                        align: "center",
                        render: (h, params) => {
                            return h("Avatar", {
                                props: {
                                    src: params.row.avatar
                                }
                            });
                        }
                    },
                    {
                        title: "手机",
                        key: "mobile",
                        width: 115,
                        sortable: true
                    },
                    {
                        title: "性别",
                        key: "sex",
                        width: 70,
                        align: "center",
                        render: (h, params) => {
                            let re = "";
                            this.dictSex.forEach(e => {
                                if (e.value == params.row.sex) {
                                    re = e.title;
                                }
                            });
                            return h("div", re);
                        }
                    },
                    {
                        title: "状态",
                        key: "status",
                        align: "center",
                        width: 120,
                        render: (h, params) => {
                            if (params.row.status === 1) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "green"
                                            }
                                        },
                                        "正常启用"
                                    )
                                ]);
                            } else if (params.row.status === 0) {
                                return h("div", [
                                    h(
                                        "Tag",
                                        {
                                            props: {
                                                color: "red"
                                            }
                                        },
                                        "禁用"
                                    )
                                ]);
                            }
                        }
                    },
                    {
                        title: "创建时间",
                        key: "createTime",
                        sortable: true,
                        sortType: "desc",
                        width: 150
                    },
                    {
                        title: "操作",
                        key: "action",
                        width: 130,
                        align: "center",
                        fixed: "right",
                        render: (h, params) => {
                            return h("div", [
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "info",
                                            size: "small"
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.row);
                                            }
                                        }
                                    },
                                    "删除"
                                )
                            ]);
                        }
                    }
                ],
                userData: [],
                totalUser: 0
            }
        },
        methods: {
            //加载数据
            showStudentDrawer() {
                this.studentDrawer = true;
            },
            changeUserPage(v) {
                this.searchUserForm.pageNumber = v;
                this.getUserDataList();
            },
            changeUserPageSize(v) {
                this.searchUserForm.pageSize = v;
                this.getUserDataList();
            },
            handleSearch() {
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                this.getUserDataList();
            },
            handleResetUser() {
                this.$refs.searchForm.resetFields();
                this.searchForm.pageNumber = 1;
                this.searchForm.pageSize = 10;
                // 重新加载数据
                this.getUserDataList();
            },
            getUserDataList() {
                this.userLoading = true;
                getUserListData(this.searchUserForm).then(res => {
                    this.userLoading = false;
                    if (res.status === true) {
                        this.userData = res.data.rows;
                        this.totalUser = res.data.total;
                    }
                });
            },
            remove(row) {
                this.$Modal.confirm({
                    title: "确认删除",
                    content: "您确认要删除?",
                    onOk: () => {
                        delCompUserByUserIds(row.id).then(res => {
                            if (res.status === true) {
                                this.$Message.success("删除成功");
                                this.getUserDataList();
                            }
                        });
                    }

                });
            },
            addUser() {
                this.modalVisible = true;
            },
            cancelSubmit() {
                this.modalVisible = false;
            },
            handleSubmit() {
                this.$refs.addUserForm.validate(valid => {
                    if (valid) {
                            // 添加
                            this.submitLoading = true;
                            addCompanyUser(this.addUserForm).then(res => {
                                this.submitLoading = false;
                                if (res.status === true) {
                                    this.$Message.success("添加成功");
                                    this.getUserDataList();
                                    this.modalVisible = false;
                                }
                            });
                        }

                });
            }
        },
        created() {
            this.getUserDataList();
        },
        mounted() {

        }
    }
</script>